<template>
  <div class="read"
       ref="read"
       :style="{ backgroundColor: themes[themes.type].bgColor }"
       @click="showControl = !showControl">
    <read-content :data="bookContent"
                  :show-loading="scrollToNext"></read-content>
    <read-control :show="showControl"
                  @themesChange="themesChange"
                  @showMenu="showMenu"
                  @toNearChapter="toNearChapter"
                  @changeSource="changeSource"></read-control>
    <read-menu ref="menu"
               :data="menu"
               @menu-change="menuChange"
               @change-chapter-index="changeMenuIndex"></read-menu>
  </div>
</template>

<script>
import readContent from "./children/readContent";
import readControl from "./children/readControl";
import readMenu from "./children/readMenu";
import { overscroll } from "@/plugins/common";

export default {
  name: 'readBook',
  props: {},
  data () {
    return {
      bookIntro: this.$route.query,
      // bookDetail: { name: '尧志兴' },
      header: {
        title: "阅读"
      },
      readId: "",
      menu: [],
      bookContent: [],
      source: {
        sourceIndex: 0, //数据源index
        menuIndex: 1, //目录index
        changeSource: null,
        sourceData: [] //数据源
      },
      scrollToNext: false, //滚动加载下一章开关
      showControl: false,
      themes: {
        //主题
        type: "default",
        default: {
          bgColor: "#eee6dd",
          color: {
            title: "#333",
            content: "#5c5d58"
          }
        },
        dark: {
          bgColor: "#0c0c0c",
          color: {
            title: "#888",
            content: "#666"
          }
        },
        protect: {
          bgColor: "#b8cd8d",
          color: {
            title: "#0c2e10",
            content: "#3d5840"
          }
        }
      },
      top: 0
    };
  },

  components: {
    readContent,
    readControl,
    readMenu
  },

  computed: {},
  created () {
    this.getBookMallDetail();


  },

  beforeMount () { },

  mounted () {
    console.log(this.bookIntro);
    console.log(this.bookDetail);
    this.$nextTick(() => {
      overscroll(this.$refs.read);
      setTimeout(() => {
        this.$refs.read.addEventListener("scroll", this.scroll);
      }, 1000);
    });
  },

  methods: {

    getBookMallDetail () {
      console.log(this.bookIntro.infoId);
      let url = `book-chapters/${this.bookIntro.infoId}`;
      this.axios({
        method: 'get',
        url,
      }).then((res) => {
        console.log(res.data);
        this.menu = res.data.chapters;
        this.bookContent = [];
        this.source.menuIndex = 1;
        this.getChapter();
      })

    },
    getChapter () {
      let bookCode = encodeURIComponent(this.menu[this.source.menuIndex - 1].link);
      console.log(bookCode);
      let url = `chapters/${bookCode}`;
      this.axios({
        method: 'get',
        url,
      }).then((res) => {
        let _content = res.data.chapter.cpContent
          ? res.data.chapter.cpContent
          : res.data.chapter.body;
        _content = _content.replace(/((\r+)?\n)+/g, " ").split(/\s+/g);
        this.bookContent.push({
          title: res.data.chapter.title,
          content: _content
        });
        document.title = this.bookName + "_" + res.data.chapter.title;
        this.scrollToNext = false;

      })
    },
    changeMenuIndex (index) {
      this.menuChange("hide");
      this.source.menuIndex = index + 1;
      this.bookContent = [];
      this.getChapter();
    },
    changeSource () {
      if (!this.source.changeSource) {
        this.source.changeSource = this.$createPicker({
          title: "换源",
          data: [
            this.source.sourceData.map(item => {
              return { text: item.name, value: item.name };
            })
          ],
          onSelect: this.toChangeSource
        });
      }
      this.source.changeSource.show();
    },
    toChangeSource (selectedVal, selectedIndex) {
      if (this.source.sourceIndex !== selectedIndex[0]) {
        this.source.sourceIndex = selectedIndex[0];
        this.readId = this.source.sourceData[this.source.sourceIndex]._id;
        this.getMenu();
      }
    },
    scroll () {
      let _dom = this.$refs.read;
      if (
        _dom.scrollTop + _dom.clientHeight + 10 >= _dom.scrollHeight &&
        _dom.scrollTop !== 0
      ) {
        if (this.source.menuIndex === this.menu.length) {
          return;
        }
        this.scrollToNext = true;
      }
    },
    themesChange (val) {
      this.themes.type = val;
    },
    menuChange (type) {
      if (type === "show") {
        this.$refs.menu.show();
      } else {
        this.$refs.menu.hide();
      }
    },
    showMenu () {
      this.showControl = false;
      this.menuChange("show");
    },
    toNearChapter (val) {
      if (val === "last") {
        if (this.source.menuIndex === 1) {
          this.$createToast({
            txt: "已经是第一章",
            type: "txt",
            time: 1000
          }).show();
          return;
        }
        this.source.menuIndex -= 1;
      } else {
        if (this.source.menuIndex === this.menu.length) {
          this.$createToast({
            txt: "已经是最后一章",
            type: "txt",
            time: 1000
          }).show();
          return;
        }
        this.source.menuIndex += 1;
      }
      this.bookContent = [];
      this.getChapter();
    }

  },

  watch: {
    scrollToNext: function (val) {
      if (val) {
        this.source.menuIndex += 1;
        this.getChapter();
      }
    }
  },
  beforeDestroy () {
    this.$refs.read.removeEventListener("scroll", this.scroll);
  }

}

</script>
<style  scoped lang="less">
.read {
  height: 100vh;
  overflow: scroll;
}
</style>